<template>
	<div v-loading="loading">
		<div class="container">
			<AForm
				v-model="infoData"
				:config="form"
				ref="form"
				state="readonly"></AForm>
		</div>
		<div class="searchButton">
			<el-button type="" size="mini" @click="back">返回</el-button>
			<el-button type="primary" size="mini" @click="save">提交</el-button>
		</div>
	</div>
</template>
<script>
	import * as regs from '@/utils/validator.js';
	import * as apis from '@/api/finance/manage/invoice/api.js';
	import AForm from '@/components/A/A-form/form/index.vue';
	export default {
		name: 'InvoiceDetail',
		components: { AForm },
		mixins: [],
		props: {},
		data() {
			return {
				loading: false,
				infoData: {},
			};
		},
		dicts: ['invoice_type'],
		computed: {
			form() {
				return [
					{
						label: '开票公司',
						// prop: "deptName",
						format: row => {
							return row?.financeProceeds?.carAppertainCompany;
						},
					},
					{
						label: '公司代码',
						prop: 'firmCode',
					},
					{
						label: '开票金额',
						prop: 'invoiceAmount',
					},
					{
						label: '发票类型',
						prop: 'invoiceType',
						type: 'select',
						dictList: this.dict.type.invoice_type,
						rules: true,
					},
					{
						label: '发票编号',
						prop: 'invoiceCode',
						type: 'input',
						rules: true,
					},
					// {
					//     label: "税额",
					//     prop: "taxAmount",
					//     type: "price",
					// },
					{
						label: '纳税人识别号',
						prop: 'taxpayerId',
						type: 'input',
						rules: true,
					},
					{
						label: '银行账号',
						prop: 'customerBankAccount',
						type: 'input',
						rules: [
							{
								required: true,
								message: '请输入收款账号',
								trigger: 'blur',
							},
							{
								pattern: regs.BANK_ACC_REG,
								message: '请输入正确银行账号',
								trigger: 'blur',
							},
						],
					},
					{
						label: '发票附件',
						prop: 'imgId',
						type: 'upload',
						prototype: {
							limit: 1,
						},
						block: true,
						rules: true,
						fitContent: true,
					},
					{
						label: '备注',
						prop: 'remark',
						type: 'textarea',
						block: true,
						fitContent: true,
					},
				];
			},
			proceedsCode() {
				return this.$route.query.proceedsCode;
			},
		},
		watch: {},
		created() {
			this.getDetails();
		},
		mounted() {},
		methods: {
			back() {
				this.$tab.closeOpenPage(this.$route);
				this._toPage({
					path: '/finance/invoiceList',
				});
			},
			getDetails() {
				this.loading = true;
				apis.Details(this.proceedsCode)
					.then(res => {
						if (res.code == 200) {
							this.infoData = res.data;
						}
					})
					.catch(err => {})
					.finally(() => {
						this.loading = false;
					});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.searchButton {
		margin: 20px;
		margin-top: 0;
		padding: 20px;
		background-color: #fff;
		display: flex;
		justify-content: flex-end;
		border-radius: 4px;
	}
	.container {
		margin: 20px;
		padding: 15px 20px;
		background-color: #fff;
		border-radius: 4px;
	}
</style>
